<%--
  Created by IntelliJ IDEA.
  User: 81968
  Date: 2022/10/17
  Time: 18:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发表评论</title>
    <link rel="stylesheet" href="../css/fabiao.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<%--    <script src="${pageContext.request.contextPath}/js/vue.js"></script>--%>
    <%--<!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--%>

</head>

<body style="background-color: #e3e4e55e;">
<div id="app">
    <div class="top">
        <div class="nav">
            <div class="logo">
                <a href="../index.html"><img src="../images/pyc_logo.png" alt="" class="logoimg"></a>
            </div>
            <div class="title">
                我的秒杀
            </div>

            <div class="nav_r">
                <div class="search">
                    <div class="search_form">
                        <input type="text" class="text">
                        <button>搜索</button>
                    </div>
                </div>
                <div class="dropdown">
                    <i><img src="../images/pyc_shopcar.svg" alt=""></i>
                    <a href="">
                        我的购物车
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="contain">
        <div class="detail-hd">
            <div class="orderinfo">
                <h3 class="o-title">评价订单</h3>
                <div class="o-info">
                        <span class="mr20">订单号：
                            <a href="" class="gray1">${result.myorderNumber}</a>
                        </span>
                    <span>${result.myorderCreateTime}</span>
                </div>
            </div>
        </div>

        <div class="mycomment-form">
            <div class="form-part1">
                <div class="f-item">
                    <div class="fi-info">
                        <div class="comment-service">
                            <div class="shop-logo">
                                <a href="">
                                    <img src="../images/pyc_touxiang.svg" alt="" class="shopimg">
                                </a>
                            </div>
                            <div class="s-main">
                                <div class="s-name">御草庄传统滋补专营店</div>
                                <dl class="shop-score-01">
                                    <div class="sum">
                                        <span class="tit">综合</span>
                                        <em class="num">4.00</em>
                                    </div>
                                    <div class="part">
                                        <span class="tit">商品</span>
                                        <em class="num">9.52</em>
                                    </div>
                                    <div class="part">
                                        <span class="tit">服务</span>
                                        <em class="num">8.98</em>
                                    </div>
                                    <div class="part">
                                        <span class="tit">物流</span>
                                        <em class="num">9.14</em>
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>

                    <div class="fi-operate">
                        <div class="fop-item">
                            <div class="commstar-group">
                                <div class="item">
                                    <div>
                                        <span class="label">商品符合度</span>
                                        <!-- <span class="label">{{value1}}</span> -->
                                    </div>
                                    <el-rate v-model="value1" :colors="colors">
                                    </el-rate>
                                </div>
                                <div class="item">
                                    <div>
                                        <span class="label">店家服务态度</span>
                                        <!-- <span class="label">{{value2}}</span> -->
                                    </div>
                                    <el-rate v-model="value2" :colors="colors">
                                    </el-rate>
                                </div>
                                <div class="item">
                                    <div>
                                        <span class="label">快递收货速度</span>
                                        <!-- <span class="label">{{value3}}</span> -->
                                    </div>
                                    <el-rate v-model="value3" :colors="colors">
                                    </el-rate>
                                </div>
                                <div class="item">
                                    <div>
                                        <span class="label">快递员服务</span>
                                        <!-- <span class="label">{{value4}}</span> -->
                                    </div>
                                    <el-rate v-model="value4" :colors="colors">
                                    </el-rate>
                                </div>
                                <div class="item">
                                    <div>
                                        <span class="label">快递包装</span>
                                        <!-- <span class="label">{{value5}}</span> -->
                                    </div>
                                    <el-rate v-model="value5" :colors="colors">
                                    </el-rate>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <form method="post">
                <div class="p-item">
                    <div class="pi-left">
                        <div class="pi-info">
                            <div class="comment-goods">
                                <div class="p-img">
                                    <a href="">
                                        <img src="../images/pyc_huangjiu.webp" alt="" class="p-name">
                                    </a>
                                </div>
                                <div class="p-name">
                                    <a href="">北京同仁堂中药材山楂500g克北山楂干山楂片带核山楂可泡茶零食</a>
                                </div>
                                <div class="p-price">
                                    <strong>￥ ${result.myorderPrice}</strong>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="pi-operate">
                        <div class="tip-text">
                            请至少填写一件商品的评价
                        </div>
                        <div class="fop-count">
                            <div class="fop-txt">商品评分</div>
                            <el-rate v-model="value6" :colors="colors" name="propoint">
                            </el-rate>
                        </div>
                        <div class="pop-item">
                            <div class="fop-txt">评价晒单</div>
                            <div class="fop-area">
                                <div class="pop-main">
                                        <input type="hidden" class="proId" value="${proid}" name="proId">
                                        <textarea name="fop-neirong" id="" cols="30" rows="10" class="fop-neirong"
                                                  placeholder="分享体验心得，给万千想买的人一个参考~"></textarea>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


                <div class="f-btnbox">
                    <div class="f-submit">发表</div>
                </div>

                </form>
            </div>
        </div>

    </div>

</div>


<!-- 引入组件库 -->
<!--引用vue-->
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data() {
            return {
                value1: 0,
                value2: 0,
                value3: 0,
                value4: 0,
                value5: 0,
                value6: 0,
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
            }
        }
    })

    $(".f-submit").click(function (){
        console.log(vue.$data.value6)
        console.log("54321")
        console.log($(".fop-neirong").val())
        var token = localStorage.getItem("token");
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/evaluation/fabiao",
            data:{
                evaluationDetil: $(".fop-neirong").val(),
                proId: $(".proId").val(),
                evaluationPoint: vue.$data.value6,
                token: token
            },
            success:function (result){
                var result = confirm("发布评论成功！");
                if(result){
                    window.location.href = "../index.jsp";
                }
            }
        })
    })


</script>

</body>

</html>
